<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>热门需求</title>
    
    <!-- Favicon -->
    <link rel="icon" type="image/x-icon" href="../favicon.ico">
    <link rel="icon" type="image/png" href="../images/logo.png">
    
    <script src="../js/tailwindcss-3.4.17.js"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#10b981',
                        'primary-dark': '#059669',
                        secondary: '#3b82f6',
                        accent: '#f59e0b',
                        danger: '#ef4444',
                        neutral: '#f9fafb',
                        'text-primary': '#1f2937',
                        'text-secondary': '#6b7280'
                    }
                }
            }
        }
    </script>
    <link rel="stylesheet" href="../css/all.min.css">
    <link rel="stylesheet" href="../css/common.css">
</head>
<body class="bg-neutral">
    <div class="container-app">
        <!-- 顶部导航栏 -->
        <header class="bg-white sticky top-0 z-10 border-b border-gray-100 shadow-soft">
            <div class="px-4 py-3 flex items-center gap-3">
                <button onclick="window.location.href='../index.html'" class="w-8 h-8 rounded-lg hover:bg-gray-100 flex items-center justify-center transition-colors">
                    <i class="fa fa-arrow-left text-text-primary"></i>
                </button>
                <h1 class="text-base font-bold flex-1 text-text-primary">热门需求</h1>
                <button class="w-8 h-8 rounded-lg hover:bg-gray-100 flex items-center justify-center transition-colors">
                    <i class="fa fa-search text-text-primary"></i>
                </button>
            </div>
        </header>
        
        <!-- 筛选栏 -->
        <div class="px-4 py-3 bg-white border-b border-gray-100">
            <div class="flex gap-2 overflow-x-auto no-scrollbar">
                <button class="px-4 py-1.5 rounded-full bg-primary text-white text-xs font-medium whitespace-nowrap">
                    全部
                </button>
                <button class="px-4 py-1.5 rounded-full bg-gray-100 text-text-secondary text-xs font-medium whitespace-nowrap hover:bg-gray-200 transition-colors">
                    农机租赁
                </button>
                <button class="px-4 py-1.5 rounded-full bg-gray-100 text-text-secondary text-xs font-medium whitespace-nowrap hover:bg-gray-200 transition-colors">
                    技术咨询
                </button>
                <button class="px-4 py-1.5 rounded-full bg-gray-100 text-text-secondary text-xs font-medium whitespace-nowrap hover:bg-gray-200 transition-colors">
                    种植合作
                </button>
                <button class="px-4 py-1.5 rounded-full bg-gray-100 text-text-secondary text-xs font-medium whitespace-nowrap hover:bg-gray-200 transition-colors">
                    产品销售
                </button>
                <button class="px-4 py-1.5 rounded-full bg-gray-100 text-text-secondary text-xs font-medium whitespace-nowrap hover:bg-gray-200 transition-colors">
                    物流配送
                </button>
            </div>
        </div>
        
        <!-- 需求列表 -->
        <main class="px-4 py-3 pb-20">
            <div class="space-y-3" id="demand-list">
                <!-- 需求卡片将通过JavaScript动态生成 -->
            </div>
        </main>
        
        <!-- 底部导航 -->
        <div id="bottom-nav"></div>
        <div id="publish-modal-container"></div>
    </div>
    
    <script src="../js/common.js"></script>
    <script src="../js/navigation.js"></script>
    <script src="../js/components.js"></script>
    <script src="../js/animate.js"></script>
    <script>
        // 需求数据
        const demandsData = [
            {
                id: 1,
                title: '急需100亩有机蔬菜种植地',
                desc: '寻找适合有机蔬菜种植的土地，要求土壤肥沃，灌溉条件良好，交通便利',
                tag: '种植合作',
                tagColor: 'bg-primary/10 text-primary',
                topBarColor: 'bg-primary',
                location: '浙江杭州',
                budget: '20万',
                views: '328',
                user: '陈**',
                phone: '188****1234',
                time: '2小时前'
            },
            {
                id: 2,
                title: '寻找大型收割机服务',
                desc: '需要专业的收割机团队，约200亩水稻收割，要求设备先进，经验丰富',
                tag: '农机租赁',
                tagColor: 'bg-secondary/10 text-secondary',
                topBarColor: 'bg-secondary',
                location: '江苏南京',
                budget: '5万',
                views: '456',
                user: '黄**',
                phone: '139****5678',
                time: '5小时前'
            },
            {
                id: 3,
                title: '农业技术培训咨询',
                desc: '需要专业的农业技术指导，包括病虫害防治、施肥技术等方面的培训',
                tag: '技术咨询',
                tagColor: 'bg-accent/10 text-accent',
                topBarColor: 'bg-accent',
                location: '安徽合肥',
                budget: '面议',
                views: '892',
                user: '刘**',
                phone: '156****8765',
                time: '1天前'
            },
            {
                id: 4,
                title: '寻找农产品销售渠道',
                desc: '有大量优质苹果待售，寻找可靠的销售渠道和合作伙伴',
                tag: '产品销售',
                tagColor: 'bg-primary/10 text-primary',
                topBarColor: 'bg-primary',
                location: '山东烟台',
                budget: '约50吨',
                views: '1.2k',
                user: '杨**',
                phone: '182****2345',
                time: '1天前'
            },
            {
                id: 5,
                title: '农资集采服务需求',
                desc: '需要大批量农资采购服务，包括化肥、种子、农药等，希望价格优惠',
                tag: '集采代购',
                tagColor: 'bg-secondary/10 text-secondary',
                topBarColor: 'bg-secondary',
                location: '河南郑州',
                budget: '预算30万',
                views: '678',
                user: '吴**',
                phone: '151****3456',
                time: '2天前'
            }
        ];

        // 渲染需求列表
        function renderDemandList() {
            const container = document.getElementById('demand-list');
            if (!container) return;

            container.innerHTML = demandsData.map(demand => `
                <div class="bg-white rounded-2xl shadow-soft border border-gray-100 hover:shadow-medium transition-all overflow-hidden group" onclick="event.target.tagName !== 'BUTTON' && (window.location.href='demand-detail.html')">
                    <div class="h-1 ${demand.topBarColor}"></div>
                    <div class="p-4">
                        <div class="flex items-start justify-between mb-2">
                            <h3 class="text-sm font-bold text-text-primary group-hover:text-primary transition-colors flex-1 pr-2">${demand.title}</h3>
                            <span class="text-xs px-2 py-1 ${demand.tagColor} rounded flex-shrink-0">${demand.tag}</span>
                        </div>
                        <p class="text-xs text-text-secondary mb-3 line-clamp-2">${demand.desc}</p>
                        <div class="flex items-center justify-between mb-3 pb-3">
                            <div class="flex items-center gap-3 text-xs text-text-secondary">
                                <span><i class="fa fa-map-marker mr-1"></i>${demand.location}</span>
                                <span><i class="fa fa-eye mr-1"></i>${demand.views}</span>
                            </div>
                            <div class="text-sm font-bold text-accent">${demand.budget}</div>
                        </div>
                        <div class="flex items-center justify-between">
                            <div class="flex items-center gap-3 text-xs text-text-secondary flex-wrap">
                                <span><i class="fa fa-user-circle mr-1"></i>${demand.user}</span>
                                <span><i class="fa fa-phone mr-1"></i>${demand.phone}</span>
                                <span><i class="fa fa-clock-o mr-1"></i>${demand.time}</span>
                            </div>
                            <button onclick="event.stopPropagation(); Components.showContactModal('${demand.user}', '${demand.phone}')" class="px-3 py-1.5 bg-primary text-white text-xs rounded-lg hover:bg-primary-dark transition-colors flex-shrink-0 ml-2">
                                联系我
                            </button>
                        </div>
                    </div>
                </div>
            `).join('');
        }

        // 页面加载时初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 初始化组件
            Components.initComponents('demand');
            
            // 渲染需求列表
            renderDemandList();
            
            // 初始化按钮反馈
            CommonUtils.initButtonFeedback();
        });
    </script>
</body>
</html>
